<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, shallowRef } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
const styles = {
  'line-height': '5rem',
  // 'margin-bottom': '1rem',
  'border-radius': '50%',
  'background-color': 'black',
  'width': '5rem',
  'height': '5rem',
  'border-width': 0,
  'opacity': 0.5,
  'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
  'text-align': 'center',
  'font-size': '14px',
  'color': 'white'
}
var mapData = [
  {
    name: "通州区",
    lat: "39.911104",
    lng: "116.667253",
    child: [
      {
        name: "项目11",
        lat: "39.860957",
        lng: "116.720392",
        address: "通州区"
      },
      {
        name: "项目12",
        lat: "39.768285",
        lng: "116.776523",
        address: "通州区"
      },
      {
        name: "项目13",
        lat: "39.820213",
        lng: "116.545006",
        address: "通州区"
      },
    ],
  },
  {
    name: "海淀区",
    lat: "40.070486",
    lng: "116.193235",
    child: [
      {
        name: "项目1",
        lat: "40.058377",
        lng: "116.370084",
        address: "海淀区"
      },
      {
        name: "项目2",
        lat: "40.07373",
        lng: "116.178453",
        address: "海淀区"
      },
      {
        name: "项目3",
        lat: "40.082459",
        lng: "116.243271",
        address: "海淀区"
      },
      {
        name: "项目4",
        lat: "40.077315",
        lng: "116.239001",
        address: "海淀区"
      },
      {
        name: "项目5",
        lat: "40.077233",
        lng: "116.246831",
        address: "海淀区"
      },
    ],
  },
  {
    name: "顺义区",
    lat: "40.1302",
    lng: "116.65417",
    child: [
      {
        name: "项目7",
        lat: "40.02302",
        lng: "116.620392",
        address: "顺义区"
      },
      {
        name: "项目8",
        lat: "39.9302",
        lng: "116.676523",
        address: "顺义区"
      },
      {
        name: "项目9",
        lat: "40.1302",
        lng: "116.645006",
        address: "顺义区"
      },
    ],
  },
];
var daxin = [
  [
    116.2518,
    39.7499
  ],
  [
    116.2546,
    39.763
  ],
  [
    116.2518,
    39.7932
  ],
  [
    116.2532,
    39.7966
  ],
  [
    116.2601,
    39.7959
  ],
  [
    116.2614,
    39.798
  ],
  [
    116.2642,
    39.7952
  ],
  [
    116.2875,
    39.7993
  ],
  [
    116.2903,
    39.7973
  ],
  [
    116.2944,
    39.798
  ],
  [
    116.2958,
    39.7952
  ],
  [
    116.2917,
    39.7932
  ],
  [
    116.293,
    39.7911
  ],
  [
    116.2985,
    39.7925
  ],
  [
    116.3026,
    39.7822
  ],
  [
    116.304,
    39.7719
  ],
  [
    116.3054,
    39.7726
  ],
  [
    116.3054,
    39.7698
  ],
  [
    116.3109,
    39.7684
  ],
  [
    116.3191,
    39.7849
  ],
  [
    116.3219,
    39.7849
  ],
  [
    116.3232,
    39.7987
  ],
  [
    116.3274,
    39.7987
  ],
  [
    116.3287,
    39.8028
  ],
  [
    116.3397,
    39.8021
  ],
  [
    116.3425,
    39.8076
  ],
  [
    116.3562,
    39.8062
  ],
  [
    116.3576,
    39.8007
  ],
  [
    116.3672,
    39.7987
  ],
  [
    116.3686,
    39.7945
  ],
  [
    116.3658,
    39.7925
  ],
  [
    116.3686,
    39.7856
  ],
  [
    116.3782,
    39.7856
  ],
  [
    116.3795,
    39.7787
  ],
  [
    116.3864,
    39.7787
  ],
  [
    116.3864,
    39.7815
  ],
  [
    116.3905,
    39.7815
  ],
  [
    116.3919,
    39.765
  ],
  [
    116.3988,
    39.7657
  ],
  [
    116.396,
    39.7884
  ],
  [
    116.4221,
    39.7897
  ],
  [
    116.4221,
    39.7925
  ],
  [
    116.4304,
    39.7939
  ],
  [
    116.429,
    39.8035
  ],
  [
    116.4235,
    39.8035
  ],
  [
    116.4262,
    39.8069
  ],
  [
    116.4235,
    39.8103
  ],
  [
    116.418,
    39.809
  ],
  [
    116.4125,
    39.8124
  ],
  [
    116.4139,
    39.8151
  ],
  [
    116.4194,
    39.8145
  ],
  [
    116.4194,
    39.8227
  ],
  [
    116.4139,
    39.8234
  ],
  [
    116.4166,
    39.8289
  ],
  [
    116.4207,
    39.8268
  ],
  [
    116.4207,
    39.8296
  ],
  [
    116.4317,
    39.8302
  ],
  [
    116.4413,
    39.8296
  ],
  [
    116.4441,
    39.8275
  ],
  [
    116.4455,
    39.8206
  ],
  [
    116.4537,
    39.8227
  ],
  [
    116.4633,
    39.8145
  ],
  [
    116.4688,
    39.8145
  ],
  [
    116.4743,
    39.8096
  ],
  [
    116.4853,
    39.8131
  ],
  [
    116.4867,
    39.8165
  ],
  [
    116.4908,
    39.8172
  ],
  [
    116.4922,
    39.8193
  ],
  [
    116.4963,
    39.8186
  ],
  [
    116.4977,
    39.8151
  ],
  [
    116.5059,
    39.8179
  ],
  [
    116.5045,
    39.8199
  ],
  [
    116.51,
    39.822
  ],
  [
    116.51,
    39.8289
  ],
  [
    116.5251,
    39.8289
  ],
  [
    116.5251,
    39.8268
  ],
  [
    116.532,
    39.8261
  ],
  [
    116.532,
    39.8199
  ],
  [
    116.5388,
    39.8124
  ],
  [
    116.5375,
    39.809
  ],
  [
    116.5388,
    39.8069
  ],
  [
    116.5361,
    39.8055
  ],
  [
    116.5388,
    39.8021
  ],
  [
    116.5347,
    39.8
  ],
  [
    116.5375,
    39.7966
  ],
  [
    116.5306,
    39.7925
  ],
  [
    116.5334,
    39.7877
  ],
  [
    116.5416,
    39.7808
  ],
  [
    116.5334,
    39.7781
  ],
  [
    116.5388,
    39.7698
  ],
  [
    116.5443,
    39.7712
  ],
  [
    116.543,
    39.7726
  ],
  [
    116.5443,
    39.7739
  ],
  [
    116.5485,
    39.7698
  ],
  [
    116.5443,
    39.7705
  ],
  [
    116.5402,
    39.7684
  ],
  [
    116.5443,
    39.7636
  ],
  [
    116.5416,
    39.7616
  ],
  [
    116.5292,
    39.7609
  ],
  [
    116.5237,
    39.7684
  ],
  [
    116.5224,
    39.7678
  ],
  [
    116.5237,
    39.7616
  ],
  [
    116.5196,
    39.7513
  ],
  [
    116.5334,
    39.7506
  ],
  [
    116.5292,
    39.743
  ],
  [
    116.5416,
    39.7417
  ],
  [
    116.5402,
    39.7389
  ],
  [
    116.5279,
    39.7375
  ],
  [
    116.5279,
    39.7334
  ],
  [
    116.5375,
    39.7341
  ],
  [
    116.532,
    39.7279
  ],
  [
    116.5251,
    39.7293
  ],
  [
    116.5224,
    39.7259
  ],
  [
    116.532,
    39.7245
  ],
  [
    116.5279,
    39.7176
  ],
  [
    116.5388,
    39.7128
  ],
  [
    116.5457,
    39.7149
  ],
  [
    116.5732,
    39.7142
  ],
  [
    116.5732,
    39.7073
  ],
  [
    116.5773,
    39.7066
  ],
  [
    116.58,
    39.7073
  ],
  [
    116.58,
    39.7101
  ],
  [
    116.6006,
    39.7094
  ],
  [
    116.6006,
    39.7135
  ],
  [
    116.6061,
    39.7128
  ],
  [
    116.6061,
    39.719
  ],
  [
    116.613,
    39.7211
  ],
  [
    116.613,
    39.7231
  ],
  [
    116.6158,
    39.7218
  ],
  [
    116.6158,
    39.7238
  ],
  [
    116.6267,
    39.7231
  ],
  [
    116.6391,
    39.7245
  ],
  [
    116.6405,
    39.7163
  ],
  [
    116.6432,
    39.7108
  ],
  [
    116.6473,
    39.695
  ],
  [
    116.6515,
    39.6936
  ],
  [
    116.6515,
    39.6881
  ],
  [
    116.6666,
    39.684
  ],
  [
    116.6679,
    39.6819
  ],
  [
    116.6679,
    39.6792
  ],
  [
    116.6707,
    39.6758
  ],
  [
    116.7036,
    39.6723
  ],
  [
    116.7036,
    39.6531
  ],
  [
    116.7023,
    39.6503
  ],
  [
    116.7091,
    39.6428
  ],
  [
    116.7215,
    39.6373
  ],
  [
    116.7256,
    39.6167
  ],
  [
    116.7064,
    39.6146
  ],
  [
    116.7064,
    39.6098
  ],
  [
    116.7229,
    39.6002
  ],
  [
    116.7284,
    39.5934
  ],
  [
    116.7036,
    39.5892
  ],
  [
    116.6954,
    39.5968
  ],
  [
    116.6473,
    39.6064
  ],
  [
    116.6432,
    39.5961
  ],
  [
    116.6364,
    39.592
  ],
  [
    116.6336,
    39.592
  ],
  [
    116.6116,
    39.6085
  ],
  [
    116.6034,
    39.6119
  ],
  [
    116.6048,
    39.6194
  ],
  [
    116.602,
    39.6222
  ],
  [
    116.5814,
    39.6236
  ],
  [
    116.5718,
    39.6201
  ],
  [
    116.5677,
    39.6098
  ],
  [
    116.5691,
    39.6043
  ],
  [
    116.554,
    39.5988
  ],
  [
    116.5251,
    39.5968
  ],
  [
    116.5265,
    39.5858
  ],
  [
    116.5251,
    39.581
  ],
  [
    116.5265,
    39.5728
  ],
  [
    116.5059,
    39.5556
  ],
  [
    116.4922,
    39.5535
  ],
  [
    116.4771,
    39.5494
  ],
  [
    116.4771,
    39.5398
  ],
  [
    116.451,
    39.5302
  ],
  [
    116.4427,
    39.5295
  ],
  [
    116.44,
    39.5185
  ],
  [
    116.4345,
    39.5164
  ],
  [
    116.4262,
    39.5164
  ],
  [
    116.4194,
    39.5226
  ],
  [
    116.407,
    39.5233
  ],
  [
    116.4207,
    39.4965
  ],
  [
    116.4331,
    39.4883
  ],
  [
    116.4413,
    39.4862
  ],
  [
    116.4482,
    39.4766
  ],
  [
    116.4496,
    39.4629
  ],
  [
    116.4551,
    39.4574
  ],
  [
    116.4523,
    39.4478
  ],
  [
    116.4427,
    39.4416
  ],
  [
    116.4386,
    39.443
  ],
  [
    116.4331,
    39.4395
  ],
  [
    116.429,
    39.4402
  ],
  [
    116.4262,
    39.4444
  ],
  [
    116.4221,
    39.4437
  ],
  [
    116.418,
    39.4478
  ],
  [
    116.3947,
    39.4519
  ],
  [
    116.3452,
    39.4498
  ],
  [
    116.3205,
    39.4691
  ],
  [
    116.2999,
    39.4876
  ],
  [
    116.282,
    39.4931
  ],
  [
    116.2601,
    39.5041
  ],
  [
    116.245,
    39.5158
  ],
  [
    116.2477,
    39.5192
  ],
  [
    116.2436,
    39.5226
  ],
  [
    116.2463,
    39.5302
  ],
  [
    116.2436,
    39.5316
  ],
  [
    116.2463,
    39.5391
  ],
  [
    116.2436,
    39.5467
  ],
  [
    116.2381,
    39.5501
  ],
  [
    116.2312,
    39.5652
  ],
  [
    116.2257,
    39.5679
  ],
  [
    116.2216,
    39.5789
  ],
  [
    116.2271,
    39.5934
  ],
  [
    116.2175,
    39.6085
  ],
  [
    116.2189,
    39.6201
  ],
  [
    116.2161,
    39.6421
  ],
  [
    116.223,
    39.6641
  ],
  [
    116.2189,
    39.6806
  ],
  [
    116.2285,
    39.6895
  ],
  [
    116.2257,
    39.695
  ],
  [
    116.2299,
    39.6991
  ],
  [
    116.2299,
    39.708
  ],
  [
    116.245,
    39.719
  ],
  [
    116.2477,
    39.7307
  ],
  [
    116.2436,
    39.7417
  ],
  [
    116.2518,
    39.7499
  ]
]

var shunyi = [
  [
    [
      116.4867,
      40.1207
    ],
    [
      116.4839,
      40.1399
    ],
    [
      116.4812,
      40.1413
    ],
    [
      116.4784,
      40.1482
    ],
    [
      116.4894,
      40.1516
    ],
    [
      116.4922,
      40.1591
    ],
    [
      116.4798,
      40.1605
    ],
    [
      116.4853,
      40.1646
    ],
    [
      116.4825,
      40.1667
    ],
    [
      116.4825,
      40.1756
    ],
    [
      116.488,
      40.1832
    ],
    [
      116.488,
      40.1921
    ],
    [
      116.4743,
      40.2045
    ],
    [
      116.4729,
      40.2134
    ],
    [
      116.4853,
      40.2292
    ],
    [
      116.4867,
      40.2457
    ],
    [
      116.5073,
      40.2587
    ],
    [
      116.51,
      40.2587
    ],
    [
      116.5265,
      40.2621
    ],
    [
      116.5388,
      40.2718
    ],
    [
      116.554,
      40.2773
    ],
    [
      116.5704,
      40.2773
    ],
    [
      116.5883,
      40.2718
    ],
    [
      116.591,
      40.2656
    ],
    [
      116.6006,
      40.2608
    ],
    [
      116.6034,
      40.2512
    ],
    [
      116.6212,
      40.2505
    ],
    [
      116.6267,
      40.2608
    ],
    [
      116.6432,
      40.2573
    ],
    [
      116.6652,
      40.2621
    ],
    [
      116.6762,
      40.2553
    ],
    [
      116.6762,
      40.2477
    ],
    [
      116.6707,
      40.2443
    ],
    [
      116.6762,
      40.2319
    ],
    [
      116.6844,
      40.2292
    ],
    [
      116.6927,
      40.2395
    ],
    [
      116.705,
      40.2484
    ],
    [
      116.7229,
      40.2697
    ],
    [
      116.7352,
      40.2793
    ],
    [
      116.7448,
      40.2793
    ],
    [
      116.7517,
      40.2752
    ],
    [
      116.7696,
      40.2731
    ],
    [
      116.7833,
      40.2793
    ],
    [
      116.7888,
      40.2889
    ],
    [
      116.808,
      40.2869
    ],
    [
      116.819,
      40.2834
    ],
    [
      116.8231,
      40.2862
    ],
    [
      116.8272,
      40.2985
    ],
    [
      116.8341,
      40.3082
    ],
    [
      116.8492,
      40.3102
    ],
    [
      116.8588,
      40.2917
    ],
    [
      116.8712,
      40.2889
    ],
    [
      116.8753,
      40.2759
    ],
    [
      116.8739,
      40.2683
    ],
    [
      116.8932,
      40.2415
    ],
    [
      116.8918,
      40.2347
    ],
    [
      116.8973,
      40.2319
    ],
    [
      116.9028,
      40.2244
    ],
    [
      116.9206,
      40.223
    ],
    [
      116.9316,
      40.2306
    ],
    [
      116.9412,
      40.2237
    ],
    [
      116.933,
      40.2127
    ],
    [
      116.9344,
      40.2003
    ],
    [
      116.9412,
      40.1942
    ],
    [
      116.9481,
      40.1907
    ],
    [
      116.9522,
      40.1715
    ],
    [
      116.9742,
      40.1571
    ],
    [
      116.9742,
      40.1454
    ],
    [
      116.9701,
      40.1344
    ],
    [
      116.9728,
      40.1296
    ],
    [
      116.9714,
      40.1159
    ],
    [
      116.981,
      40.0864
    ],
    [
      116.9783,
      40.0836
    ],
    [
      116.9797,
      40.0802
    ],
    [
      116.9838,
      40.0768
    ],
    [
      116.9824,
      40.0719
    ],
    [
      116.9783,
      40.0651
    ],
    [
      116.9728,
      40.0651
    ],
    [
      116.9632,
      40.0623
    ],
    [
      116.9618,
      40.0513
    ],
    [
      116.9522,
      40.0459
    ],
    [
      116.9385,
      40.0486
    ],
    [
      116.9096,
      40.0472
    ],
    [
      116.8808,
      40.0438
    ],
    [
      116.8712,
      40.0404
    ],
    [
      116.8616,
      40.0486
    ],
    [
      116.8506,
      40.0527
    ],
    [
      116.8369,
      40.0507
    ],
    [
      116.8108,
      40.0294
    ],
    [
      116.8039,
      40.028
    ],
    [
      116.7819,
      40.0314
    ],
    [
      116.7709,
      40.0136
    ],
    [
      116.7476,
      40.017
    ],
    [
      116.7448,
      40.0239
    ],
    [
      116.727,
      40.0225
    ],
    [
      116.7105,
      40.0253
    ],
    [
      116.7064,
      40.0225
    ],
    [
      116.6995,
      40.0246
    ],
    [
      116.6954,
      40.0177
    ],
    [
      116.6872,
      40.0163
    ],
    [
      116.6858,
      40.0143
    ],
    [
      116.6844,
      40.015
    ],
    [
      116.6679,
      40.0136
    ],
    [
      116.6638,
      40.0191
    ],
    [
      116.657,
      40.0177
    ],
    [
      116.6611,
      40.0191
    ],
    [
      116.6611,
      40.0211
    ],
    [
      116.6556,
      40.0177
    ],
    [
      116.6473,
      40.0239
    ],
    [
      116.6391,
      40.0225
    ],
    [
      116.6377,
      40.0204
    ],
    [
      116.635,
      40.0246
    ],
    [
      116.635,
      40.0232
    ],
    [
      116.624,
      40.0232
    ],
    [
      116.6212,
      40.0246
    ],
    [
      116.6171,
      40.0321
    ],
    [
      116.613,
      40.0307
    ],
    [
      116.6116,
      40.0266
    ],
    [
      116.6061,
      40.0184
    ],
    [
      116.5979,
      40.0163
    ],
    [
      116.5787,
      40.0273
    ],
    [
      116.5787,
      40.0328
    ],
    [
      116.5746,
      40.0328
    ],
    [
      116.5759,
      40.0301
    ],
    [
      116.5718,
      40.0314
    ],
    [
      116.5663,
      40.039
    ],
    [
      116.5471,
      40.0472
    ],
    [
      116.5443,
      40.0507
    ],
    [
      116.5457,
      40.0568
    ],
    [
      116.543,
      40.0596
    ],
    [
      116.5388,
      40.0623
    ],
    [
      116.5306,
      40.0699
    ],
    [
      116.5251,
      40.0719
    ],
    [
      116.5114,
      40.0713
    ],
    [
      116.499,
      40.0802
    ],
    [
      116.4867,
      40.0809
    ],
    [
      116.4825,
      40.0836
    ],
    [
      116.4716,
      40.085
    ],
    [
      116.4702,
      40.0884
    ],
    [
      116.4674,
      40.0884
    ],
    [
      116.4647,
      40.0925
    ],
    [
      116.4661,
      40.0946
    ],
    [
      116.4908,
      40.1001
    ],
    [
      116.4922,
      40.1097
    ],
    [
      116.4908,
      40.1173
    ],
    [
      116.4867,
      40.1207
    ]
  ],
  [
    [
      116.5787,
      40.0836
    ],
    [
      116.5732,
      40.1077
    ],
    [
      116.5773,
      40.1049
    ],
    [
      116.5814,
      40.0912
    ],
    [
      116.5952,
      40.0919
    ],
    [
      116.5952,
      40.0953
    ],
    [
      116.5979,
      40.0953
    ],
    [
      116.5965,
      40.0994
    ],
    [
      116.5993,
      40.1001
    ],
    [
      116.6034,
      40.0898
    ],
    [
      116.6103,
      40.0527
    ],
    [
      116.6089,
      40.0575
    ],
    [
      116.6034,
      40.0562
    ],
    [
      116.6048,
      40.052
    ],
    [
      116.602,
      40.0507
    ],
    [
      116.6034,
      40.0479
    ],
    [
      116.5965,
      40.0472
    ],
    [
      116.5924,
      40.0623
    ],
    [
      116.5897,
      40.0623
    ],
    [
      116.5869,
      40.0788
    ],
    [
      116.5814,
      40.0788
    ],
    [
      116.5828,
      40.0754
    ],
    [
      116.5787,
      40.0836
    ]
  ]
]

var haiding = [
  [
    116.0486,
    40.0871
  ],
  [
    116.0719,
    40.109
  ],
  [
    116.0733,
    40.1138
  ],
  [
    116.0843,
    40.1193
  ],
  [
    116.1214,
    40.1159
  ],
  [
    116.1296,
    40.1166
  ],
  [
    116.1324,
    40.1207
  ],
  [
    116.153,
    40.1221
  ],
  [
    116.1694,
    40.1269
  ],
  [
    116.1653,
    40.1324
  ],
  [
    116.1653,
    40.144
  ],
  [
    116.179,
    40.1461
  ],
  [
    116.1804,
    40.153
  ],
  [
    116.1845,
    40.1578
  ],
  [
    116.1928,
    40.155
  ],
  [
    116.1942,
    40.1605
  ],
  [
    116.2024,
    40.1612
  ],
  [
    116.2065,
    40.1447
  ],
  [
    116.2093,
    40.1413
  ],
  [
    116.2477,
    40.1344
  ],
  [
    116.2436,
    40.1269
  ],
  [
    116.245,
    40.118
  ],
  [
    116.2436,
    40.1063
  ],
  [
    116.2518,
    40.107
  ],
  [
    116.2573,
    40.1049
  ],
  [
    116.2587,
    40.1063
  ],
  [
    116.2573,
    40.1111
  ],
  [
    116.2587,
    40.1125
  ],
  [
    116.2614,
    40.1118
  ],
  [
    116.2628,
    40.1042
  ],
  [
    116.2587,
    40.1015
  ],
  [
    116.2628,
    40.0967
  ],
  [
    116.2601,
    40.0967
  ],
  [
    116.2601,
    40.0946
  ],
  [
    116.2683,
    40.0939
  ],
  [
    116.2724,
    40.0919
  ],
  [
    116.2793,
    40.0802
  ],
  [
    116.2875,
    40.0809
  ],
  [
    116.2999,
    40.061
  ],
  [
    116.3191,
    40.0616
  ],
  [
    116.3274,
    40.0534
  ],
  [
    116.3329,
    40.0582
  ],
  [
    116.3466,
    40.0603
  ],
  [
    116.3466,
    40.0637
  ],
  [
    116.3521,
    40.0678
  ],
  [
    116.3576,
    40.0699
  ],
  [
    116.3686,
    40.0692
  ],
  [
    116.3686,
    40.0644
  ],
  [
    116.3795,
    40.0658
  ],
  [
    116.3823,
    40.0616
  ],
  [
    116.3727,
    40.0575
  ],
  [
    116.3727,
    40.0541
  ],
  [
    116.3686,
    40.052
  ],
  [
    116.3686,
    40.0493
  ],
  [
    116.3699,
    40.05
  ],
  [
    116.3699,
    40.0479
  ],
  [
    116.3768,
    40.0486
  ],
  [
    116.3768,
    40.0438
  ],
  [
    116.3892,
    40.0417
  ],
  [
    116.3878,
    40.0376
  ],
  [
    116.3919,
    40.0335
  ],
  [
    116.3754,
    40.0307
  ],
  [
    116.3507,
    40.0273
  ],
  [
    116.3562,
    40.0232
  ],
  [
    116.3562,
    40.0198
  ],
  [
    116.3768,
    39.993
  ],
  [
    116.3809,
    39.9779
  ],
  [
    116.3809,
    39.9724
  ],
  [
    116.3809,
    39.9683
  ],
  [
    116.3713,
    39.9676
  ],
  [
    116.3713,
    39.9483
  ],
  [
    116.3562,
    39.9442
  ],
  [
    116.3562,
    39.9511
  ],
  [
    116.3535,
    39.9511
  ],
  [
    116.3507,
    39.9497
  ],
  [
    116.3507,
    39.9435
  ],
  [
    116.3315,
    39.9442
  ],
  [
    116.326,
    39.9422
  ],
  [
    116.326,
    39.9387
  ],
  [
    116.3329,
    39.9367
  ],
  [
    116.3356,
    39.9037
  ],
  [
    116.3342,
    39.8975
  ],
  [
    116.326,
    39.8969
  ],
  [
    116.3136,
    39.8969
  ],
  [
    116.3026,
    39.892
  ],
  [
    116.2958,
    39.8866
  ],
  [
    116.2958,
    39.8969
  ],
  [
    116.2587,
    39.8969
  ],
  [
    116.2532,
    39.8969
  ],
  [
    116.2532,
    39.8996
  ],
  [
    116.2532,
    39.9147
  ],
  [
    116.2505,
    39.9168
  ],
  [
    116.2532,
    39.9174
  ],
  [
    116.2532,
    39.9216
  ],
  [
    116.2354,
    39.9168
  ],
  [
    116.2189,
    39.9181
  ],
  [
    116.2065,
    39.9168
  ],
  [
    116.2079,
    39.9257
  ],
  [
    116.2161,
    39.9277
  ],
  [
    116.2148,
    39.9312
  ],
  [
    116.2161,
    39.9312
  ],
  [
    116.2134,
    39.9339
  ],
  [
    116.2189,
    39.9408
  ],
  [
    116.2189,
    39.9442
  ],
  [
    116.2161,
    39.9442
  ],
  [
    116.2148,
    39.9483
  ],
  [
    116.2038,
    39.9566
  ],
  [
    116.201,
    39.9614
  ],
  [
    116.1928,
    39.9662
  ],
  [
    116.1859,
    39.9765
  ],
  [
    116.1873,
    39.9834
  ],
  [
    116.1845,
    39.9861
  ],
  [
    116.179,
    39.9889
  ],
  [
    116.1777,
    39.982
  ],
  [
    116.1722,
    39.9813
  ],
  [
    116.1667,
    39.9875
  ],
  [
    116.1584,
    39.9841
  ],
  [
    116.1516,
    39.993
  ],
  [
    116.1543,
    39.9971
  ],
  [
    116.1612,
    39.9998
  ],
  [
    116.1722,
    40.0005
  ],
  [
    116.1749,
    40.006
  ],
  [
    116.1653,
    40.0156
  ],
  [
    116.1584,
    40.0198
  ],
  [
    116.1488,
    40.0218
  ],
  [
    116.1447,
    40.0273
  ],
  [
    116.12,
    40.0294
  ],
  [
    116.1021,
    40.0273
  ],
  [
    116.0815,
    40.0314
  ],
  [
    116.0774,
    40.0335
  ],
  [
    116.0733,
    40.0431
  ],
  [
    116.0692,
    40.0651
  ],
  [
    116.0609,
    40.0857
  ],
  [
    116.0486,
    40.0871
  ]
]

var tongzhou = [
  [
    116.532,
    39.8261
  ],
  [
    116.5347,
    39.8275
  ],
  [
    116.5334,
    39.833
  ],
  [
    116.543,
    39.8289
  ],
  [
    116.5457,
    39.8357
  ],
  [
    116.5471,
    39.8337
  ],
  [
    116.5567,
    39.8351
  ],
  [
    116.5594,
    39.833
  ],
  [
    116.5608,
    39.8337
  ],
  [
    116.5622,
    39.8302
  ],
  [
    116.5622,
    39.8323
  ],
  [
    116.5718,
    39.8323
  ],
  [
    116.5718,
    39.8296
  ],
  [
    116.5759,
    39.8275
  ],
  [
    116.5773,
    39.8234
  ],
  [
    116.5828,
    39.8234
  ],
  [
    116.58,
    39.8193
  ],
  [
    116.5924,
    39.8193
  ],
  [
    116.5924,
    39.822
  ],
  [
    116.5938,
    39.8227
  ],
  [
    116.6034,
    39.8227
  ],
  [
    116.602,
    39.833
  ],
  [
    116.6048,
    39.8337
  ],
  [
    116.6061,
    39.844
  ],
  [
    116.6089,
    39.8467
  ],
  [
    116.6061,
    39.8474
  ],
  [
    116.6061,
    39.8515
  ],
  [
    116.613,
    39.8502
  ],
  [
    116.6267,
    39.8605
  ],
  [
    116.624,
    39.8611
  ],
  [
    116.6212,
    39.8666
  ],
  [
    116.6171,
    39.8694
  ],
  [
    116.624,
    39.8742
  ],
  [
    116.6267,
    39.8811
  ],
  [
    116.6309,
    39.8824
  ],
  [
    116.6295,
    39.89
  ],
  [
    116.6144,
    39.8893
  ],
  [
    116.6144,
    39.8948
  ],
  [
    116.6199,
    39.8975
  ],
  [
    116.6185,
    39.8975
  ],
  [
    116.6226,
    39.903
  ],
  [
    116.6199,
    39.9044
  ],
  [
    116.6212,
    39.9181
  ],
  [
    116.6199,
    39.9181
  ],
  [
    116.6212,
    39.9195
  ],
  [
    116.6199,
    39.9229
  ],
  [
    116.6254,
    39.9223
  ],
  [
    116.6226,
    39.9298
  ],
  [
    116.6254,
    39.9305
  ],
  [
    116.6254,
    39.9326
  ],
  [
    116.6295,
    39.9319
  ],
  [
    116.6281,
    39.9401
  ],
  [
    116.6322,
    39.9394
  ],
  [
    116.6295,
    39.9477
  ],
  [
    116.6309,
    39.9511
  ],
  [
    116.6446,
    39.9463
  ],
  [
    116.6405,
    39.9744
  ],
  [
    116.6418,
    39.9834
  ],
  [
    116.635,
    39.9834
  ],
  [
    116.6336,
    39.9868
  ],
  [
    116.6391,
    39.9875
  ],
  [
    116.6405,
    39.9909
  ],
  [
    116.6446,
    39.9909
  ],
  [
    116.6432,
    39.9971
  ],
  [
    116.6322,
    40.0053
  ],
  [
    116.6254,
    40.0088
  ],
  [
    116.6226,
    40.0074
  ],
  [
    116.6185,
    40.0095
  ],
  [
    116.6199,
    40.0122
  ],
  [
    116.6048,
    40.0129
  ],
  [
    116.5979,
    40.0163
  ],
  [
    116.6061,
    40.0184
  ],
  [
    116.6116,
    40.0266
  ],
  [
    116.613,
    40.0307
  ],
  [
    116.6171,
    40.0321
  ],
  [
    116.6212,
    40.0246
  ],
  [
    116.624,
    40.0232
  ],
  [
    116.635,
    40.0232
  ],
  [
    116.635,
    40.0246
  ],
  [
    116.6377,
    40.0204
  ],
  [
    116.6391,
    40.0225
  ],
  [
    116.6473,
    40.0239
  ],
  [
    116.6556,
    40.0177
  ],
  [
    116.6611,
    40.0211
  ],
  [
    116.6611,
    40.0191
  ],
  [
    116.657,
    40.0177
  ],
  [
    116.6638,
    40.0191
  ],
  [
    116.6679,
    40.0136
  ],
  [
    116.6844,
    40.015
  ],
  [
    116.6858,
    40.0143
  ],
  [
    116.6872,
    40.0163
  ],
  [
    116.6954,
    40.0177
  ],
  [
    116.6995,
    40.0246
  ],
  [
    116.7064,
    40.0225
  ],
  [
    116.7105,
    40.0253
  ],
  [
    116.727,
    40.0225
  ],
  [
    116.7448,
    40.0239
  ],
  [
    116.7476,
    40.017
  ],
  [
    116.7709,
    40.0136
  ],
  [
    116.7751,
    39.993
  ],
  [
    116.7668,
    39.9799
  ],
  [
    116.7599,
    39.9614
  ],
  [
    116.7792,
    39.9552
  ],
  [
    116.7833,
    39.9483
  ],
  [
    116.7819,
    39.9181
  ],
  [
    116.786,
    39.9065
  ],
  [
    116.7847,
    39.8962
  ],
  [
    116.7915,
    39.8838
  ],
  [
    116.8053,
    39.8907
  ],
  [
    116.8121,
    39.892
  ],
  [
    116.819,
    39.8914
  ],
  [
    116.852,
    39.8701
  ],
  [
    116.8588,
    39.8591
  ],
  [
    116.8877,
    39.844
  ],
  [
    116.8918,
    39.8371
  ],
  [
    116.9014,
    39.8302
  ],
  [
    116.9083,
    39.8309
  ],
  [
    116.9014,
    39.8433
  ],
  [
    116.9028,
    39.8488
  ],
  [
    116.9055,
    39.8522
  ],
  [
    116.9083,
    39.8522
  ],
  [
    116.9179,
    39.8474
  ],
  [
    116.9261,
    39.8364
  ],
  [
    116.9357,
    39.7966
  ],
  [
    116.9371,
    39.7897
  ],
  [
    116.9398,
    39.7842
  ],
  [
    116.9371,
    39.7808
  ],
  [
    116.9206,
    39.7801
  ],
  [
    116.9165,
    39.776
  ],
  [
    116.9151,
    39.7678
  ],
  [
    116.911,
    39.7636
  ],
  [
    116.9,
    39.7588
  ],
  [
    116.9096,
    39.7499
  ],
  [
    116.9124,
    39.7321
  ],
  [
    116.9,
    39.7259
  ],
  [
    116.8904,
    39.7259
  ],
  [
    116.8835,
    39.7163
  ],
  [
    116.889,
    39.7032
  ],
  [
    116.8973,
    39.6977
  ],
  [
    116.9055,
    39.6867
  ],
  [
    116.9069,
    39.6764
  ],
  [
    116.8918,
    39.673
  ],
  [
    116.8808,
    39.6751
  ],
  [
    116.8726,
    39.6703
  ],
  [
    116.8575,
    39.6689
  ],
  [
    116.852,
    39.6641
  ],
  [
    116.8506,
    39.6552
  ],
  [
    116.8314,
    39.6428
  ],
  [
    116.8314,
    39.6366
  ],
  [
    116.841,
    39.6243
  ],
  [
    116.8355,
    39.6194
  ],
  [
    116.8286,
    39.6174
  ],
  [
    116.819,
    39.6181
  ],
  [
    116.7929,
    39.6105
  ],
  [
    116.7915,
    39.605
  ],
  [
    116.786,
    39.6037
  ],
  [
    116.7874,
    39.5968
  ],
  [
    116.7847,
    39.5954
  ],
  [
    116.7805,
    39.594
  ],
  [
    116.7751,
    39.605
  ],
  [
    116.7641,
    39.6146
  ],
  [
    116.7545,
    39.6167
  ],
  [
    116.7256,
    39.6167
  ],
  [
    116.7215,
    39.6373
  ],
  [
    116.7091,
    39.6428
  ],
  [
    116.7023,
    39.6503
  ],
  [
    116.7036,
    39.6531
  ],
  [
    116.7036,
    39.6723
  ],
  [
    116.6707,
    39.6758
  ],
  [
    116.6679,
    39.6792
  ],
  [
    116.6679,
    39.6819
  ],
  [
    116.6666,
    39.684
  ],
  [
    116.6515,
    39.6881
  ],
  [
    116.6515,
    39.6936
  ],
  [
    116.6473,
    39.695
  ],
  [
    116.6432,
    39.7108
  ],
  [
    116.6405,
    39.7163
  ],
  [
    116.6391,
    39.7245
  ],
  [
    116.6267,
    39.7231
  ],
  [
    116.6158,
    39.7238
  ],
  [
    116.6158,
    39.7218
  ],
  [
    116.613,
    39.7231
  ],
  [
    116.613,
    39.7211
  ],
  [
    116.6061,
    39.719
  ],
  [
    116.6061,
    39.7128
  ],
  [
    116.6006,
    39.7135
  ],
  [
    116.6006,
    39.7094
  ],
  [
    116.58,
    39.7101
  ],
  [
    116.58,
    39.7073
  ],
  [
    116.5773,
    39.7066
  ],
  [
    116.5732,
    39.7073
  ],
  [
    116.5732,
    39.7142
  ],
  [
    116.5457,
    39.7149
  ],
  [
    116.5388,
    39.7128
  ],
  [
    116.5279,
    39.7176
  ],
  [
    116.532,
    39.7245
  ],
  [
    116.5224,
    39.7259
  ],
  [
    116.5251,
    39.7293
  ],
  [
    116.532,
    39.7279
  ],
  [
    116.5375,
    39.7341
  ],
  [
    116.5279,
    39.7334
  ],
  [
    116.5279,
    39.7375
  ],
  [
    116.5402,
    39.7389
  ],
  [
    116.5416,
    39.7417
  ],
  [
    116.5292,
    39.743
  ],
  [
    116.5334,
    39.7506
  ],
  [
    116.5196,
    39.7513
  ],
  [
    116.5237,
    39.7616
  ],
  [
    116.5224,
    39.7678
  ],
  [
    116.5237,
    39.7684
  ],
  [
    116.5292,
    39.7609
  ],
  [
    116.5416,
    39.7616
  ],
  [
    116.5443,
    39.7636
  ],
  [
    116.5402,
    39.7684
  ],
  [
    116.5443,
    39.7705
  ],
  [
    116.5485,
    39.7698
  ],
  [
    116.5443,
    39.7739
  ],
  [
    116.543,
    39.7726
  ],
  [
    116.5443,
    39.7712
  ],
  [
    116.5388,
    39.7698
  ],
  [
    116.5334,
    39.7781
  ],
  [
    116.5416,
    39.7808
  ],
  [
    116.5334,
    39.7877
  ],
  [
    116.5306,
    39.7925
  ],
  [
    116.5375,
    39.7966
  ],
  [
    116.5347,
    39.8
  ],
  [
    116.5388,
    39.8021
  ],
  [
    116.5361,
    39.8055
  ],
  [
    116.5388,
    39.8069
  ],
  [
    116.5375,
    39.809
  ],
  [
    116.5388,
    39.8124
  ],
  [
    116.532,
    39.8199
  ],
  [
    116.532,
    39.8261
  ]
]

// @ts-ignore
window._AMapSecurityConfig = {
  securityJsCode: "e1833ddaed11f727cbe2bfdefd55f90a",
};
const map = shallowRef();
const pointMapData = new Map();
let pointMapChildData = new Map()
const initMap = () => {
  AMapLoader.load({
    key: "05d3881114c66f3d9ddaa7b0212ca635", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  })
    .then((AMap) => {
      map.value = new AMap.Map("map", {
        viewMode: '3D', //默认使用 2D 模式
        zoom: 11, //地图级别
        center: [116.396923, 39.918203], //地图中心点
        mapStyle: "amap://styles/normal", //设置地图的显示样式
      });
      createText(AMap);
      zoomChange()
      var scale = new AMap.Scale();
      var hawkeye = new AMap.HawkEye();
      var controlbar = new AMap.ControlBar()
      map.value.addControl(scale);
      map.value.addControl(hawkeye);
      map.value.addControl(controlbar);
      pointMapChildData.forEach(item => {
        map.value.remove(item)
      })
      addPolygon(daxin, AMap)
      addPolygon(shunyi, AMap)
      addPolygon(haiding, AMap)
      addPolygon(tongzhou, AMap)
    })
    .catch((e) => {
      console.log(e);
    });
}
// 创建纯文本标记
const createText = (AMap: any) => {
  for (const i in mapData) {
    var text = new AMap.Text({
      text: mapData[i].name,//标记显示的文本内容
      anchor: 'center', // 设置文本标记锚点
      draggable: false, //是否可拖拽
      cursor: 'pointer',//指定鼠标悬停的鼠标样式
      angle: 0,//点标记的旋转的角度
      style: styles,
      position: [mapData[i].lng, mapData[i].lat]//点标记在地图上显示的位置
    });
    pointMapData.set(mapData[i], text)
    text.setMap(map.value);//将文本标记设置到地图上
    text.on('mouseover', textOver)
    text.on('mouseout', textOut)
    var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(10, -10) })
    for (const j in mapData[i].child) {
      var marker = new AMap.Marker({
        position: [mapData[i].child[j].lng, mapData[i].child[j].lat],
        title: mapData[i].child[j].name,
        // content: mapData[i].child[j].address,
        icon: './src/assets/7.png'
      })
      marker.setMap(map.value);
      pointMapChildData.set(mapData[i].child[j], marker)
      marker.content = `<div style="width:220px;height:100px;text-align:center;display:flex;flex-direction:column;justify-content:center;">
         <h2 style="font-size:20px;">${mapData[i].child[j].name}</h2>
         <p>${mapData[i].child[j].address}</p>
        </div>`
      const markerClick = (e: any) => {
        infoWindow.setContent(e.target.content)
        infoWindow.open(map.value, e.target.getPosition())
      }
      marker.on('click', markerClick)
    }

  }
}
//鼠标移入
const textOver = (e: any) => {
  // console.log(e)
  e.target.setStyle({
    'background-color': 'red',
    'color': 'white'
  })
}
//鼠标移出
const textOut = (e: any) => {
  e.target.setStyle(styles)
}

//地图放大缩小
const zoomChange = () => {
  map.value.on('zoomchange', () => {
    let zoom = map.value.getZoom()//获取地图放大缩小等级
    if (zoom > 11) {//  地图小于等于10
      pointMapChildData.forEach(item => {//添加小红点
        map.value.add(item)
      })
      pointMapData.forEach(item => {//移除标记文本
        map.value.remove(item)
      })
    } else {//  地图小于等于10
      pointMapChildData.forEach(item => {//移除小红点
        map.value.remove(item)
      })
      pointMapData.forEach(item => {//添加标记文本
        map.value.add(item)
      })

    }
  });
}

const addPolygon = (data: any, AMap: any) => {
  let polygon = new AMap.Polygon({
    path: data,
    fillColor: '#ccebc5',
    strokeOpacity: 1,
    fillOpacity: 0.5,
    strokeColor: '#2b8cbe',
    strokeWeight: 1,
    strokeStyle: 'dashed',
    strokeDasharray: [5, 5],
  });
  polygon.on('mouseover', () => {
    polygon.setOptions({
      fillOpacity: 0.7,
      fillColor: '#7bccc4'
    })
  })
  polygon.on('mouseout', () => {
    polygon.setOptions({
      fillOpacity: 0.5,
      fillColor: '#ccebc5'

    })
  })
  map.value.add(polygon);
}

onMounted(() => {
  initMap();
})
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 700px;

}
</style>